<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<div id="one">
			
		</div>
		
		<div class="two"></div>
		<div class="two"></div>
		<div class="two"></div>
		<div class="two"></div>
		<div class="two"></div>
		
		<div class="third">
			uuiii
		</div>
	</body>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		//jQuery 是 javascript 的一个库
		//write less,do more. 
		/* 原生js*/
		var div_el = document.getElementById('one');
		div_el.innerHTML = '这是一个div';
		div_el.style.backgroundColor = 'yellow';
		div_el.style.height = '100px';
		div_el.onclick = function(){
			alert('div_el');
		}
		
// 		function $(){
// 			return 
// 		}
		
		
		//jQuery的写法
		// $()
		$('#one').html('重新修改文字内容');
		$('#one').css('color','white');
		
		$('div.two').eq(0).html('1');
		$('div.two').eq(1).html('2');
		$('div.two').eq(2).html('3');
		$('div.two').eq(3).html('4');
		$('div.two').eq(4).html('5');
		
		//切记 此法只能添加已存在的 元素事件
		$('div.two').click(function(){
			$(this).css('background','red');
		});
		
		//动态添加的元素要使用 on事件
		$('div.third').on('click',function(){
			console.log('1234444');
		});
		
		
	</script>
</html>